<template>
	<view v-if="!isLoading" class="container">
		<!-- <image class="details-image" :src="info.course && info.course.thumbnail ? getImgUrl(info.course.thumbnail) : ''" mode="widthFix"></image> -->
		<image class="details-image" src="/static/img/live_img2.jpg" mode="widthFix"></image>
		 <view class="card-area">
			<view class="course-title">{{ info.course && info.course.title ? info.course.title : '-' }}二次元插画魔鬼特训班</view>
			<view class="course-content">{{ info.course && info.course.content ? info.course.content : '' }}二次元插画是ACG圈内最受欢迎的画风，在游戏、动漫、漫画中应用非常广泛二次元插画是ACG圈内最受欢迎的画风，在游戏、动漫、漫画中应用非常广泛二次元插画是ACG圈内最受欢迎的画风，在游戏、动漫、漫画中应用非常广泛</view>
			<u-time-line class="course-chapter-line">
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view class="chapter-line-content" @click="goCourse({ thumbnail: '/static/img/live_img2.jpg', title:'二次元插画魔鬼特训班', teacher: '张三', id: 1})">
							<view>
								<view class="u-order-title">线造型基础</view>
								<!-- <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
								<view class="u-order-time">2019-05-08 12:12</view> -->
							</view>
							<view class="list-ss">
								<!-- <video
								 	:src="url"
								 	ref="videoPlayer"
								 	id="videoPlayer"
								 	loop
								 	poster=""
								 	type="application/x-mpegURL"
								 	class="chapter-video"
									@play="handlePlay"
								 ></video> -->
								 <image class="items-image" src="/static/img/live_img2.jpg" mode="widthFix"></image>
								 <view class="items-icon-play">
								 	<image class="items-icon-image" src="/static/img/bfq-icon.png" mode="aspectFill"></image>
								 </view>
							</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item>
					<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
					<template v-slot:content>
						<view class="chapter-line-content">
							<view>
								<view class="u-order-title">空间造型基础</view>
								<!-- <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
								<view class="u-order-time">2019-05-08 12:12</view> -->
							</view>
							<view class="list-ss">
								<!-- <video
								 	:src="url"
								 	ref="videoPlayer"
								 	id="videoPlayer"
								 	loop
								 	poster=""
								 	type="application/x-mpegURL"
								 	class="chapter-video"
									@play="handlePlay"
								 ></video> -->
								 <image class="items-image" src="/static/img/live_img2.jpg" mode="widthFix"></image>
								 <view class="items-icon-play">
								 	<image class="items-icon-image" src="/static/img/bfq-icon.png" mode="aspectFill"></image>
								 </view>
							</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
			 <!-- 其他信息 -->
			 <view class="order-info i-card">
			   <view class="info-item">
			     <view class="item-lable">锁定时间</view>
			     <view class="item-content">
			       <text>{{info.course && info.course.expire_time ? formatTime(info.course.expire_time) : '-'}}</text>
			     </view>
			   </view>
			   <view class="info-item">
			     <view class="item-lable">创建时间</view>
			     <view class="item-content">
			       <text>{{info.course && info.course.created_at ? formatTime(info.course.created_at) : '-'}}</text>
			     </view>
			   </view>
			 </view>
		 </view>
	</view>
</template>

<script>
    import { timestampChangDate, ImgUrlPrefix } from '@/utils/util.js'
    import * as FindApi from '@/api/find'
	import { STATUS } from '@/store/mutation-types'
	import storage from '@/utils/storage'
	import emoji from "../../static/emoji.json"
	// tab栏数据
	const tabs = [{
		  name: `课程详情`,
		  value: 'all'
		},
		{
		  name: `课程评论`,
		  value: 'payment'
		},
		{
		  name: `课程教师`,
		  value: 'teacher'
		}
	]
	export default {
	  data() {
	    return {
	       isLoading:false,
		   id: '',
		   info: {},
		   // tab栏数据
		   tabs,
		   // 当前标签索引
		   curTab: 0,
		   url: '',
		   messages: '',
		   emoji: emoji,
		   emojiVisible:false,
		   scrollTop: 0,
		   scrollToView: '', // 滚动目标元素ID
		   comment_list: [], //评论列表
		   disabled:true,
		   keyboardStatus: false,
		   keyboardHeight: 0,
		   isPlaying: false,
		   nowCourse: ''
	    }
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad(options) {
	      this.id = options.id
		  //设置title标题
		  if (options) {
		  	this.nowCourse = options.name
		  	uni.setNavigationBarTitle({
		  		title: this.nowCourse
		  	})
		  }
		  // this.getCourseList()
		  this.getCoursePalyer()
	  },
	  watch: {
	  	messages: {
	  		handler(newVal,oldVal) {
	  			if(newVal) {
	  				this.disabled = false
	  			} else{
	  				this.disabled = true
	  			}
	  		},
	  		deep:true
	  	}
	  },
	  methods: {
		playVideo() {
		  this.handlePlay()
		  this.isPlaying = true;
		},
		// 课程详情
		getCourseList() {
			const app = this
			FindApi.courseDetail({ id: app.id }, { load: false })
			.then(result => {
			  // 合并新数据
			  console.log(result)
			  app.info = result.data
			}).catch(err=> {
				
			})
		},
		// 评论列表
		getCommentList: function() {
			const app = this
			FindApi.corseCommentList({ id: app.id }, { load: false })
			.then(result => {
			  // 合并新数据
			  console.log('评论列表',result)
			  app.comment_list = result.data.items
			}).catch(err=> {
				
			})
		},
		// 视频播放
		getCoursePalyer: function() {
			const app = this
			FindApi.coursePalyer({ id: app.id }, { load: false })
			.then(result => {
			  // 合并新数据
			  console.log(result)
			  app.url = result.data.url
			}).catch(err=> {
				
			})
		},
		handlePlay() {
			const app = this
			app.videoContext = uni.createVideoContext('videoPlayer');//创建视频实例指向video
			if(storage.get(STATUS) == 20) {
				app.videoContext.play();  // 播放
			} else {
				app.videoContext.pause();  // 停止
				uni.showToast({
				  title: '非会员用户不能观看视频',
				  icon: "none",
				  duration: 2500
				})
			}
		},
		// 转换时间戳
		formatTime (data) {
			const currTime = timestampChangDate('YYYY-mm-dd HH:MM:SS', data * 1000)
			return currTime
		},
		// 切换标签项
		onChangeTab(index) {
		  const app = this
		  // 设置当前选中的标签
		  app.curTab = index
		  if(index == 1) {
			  app.getCommentList() // 评论列表
		  }
		  // 刷新订单列表
		  // app.onRefreshList()
		},
		
		// 图片地址拼接
		getImgUrl(val) {
		    const url = ImgUrlPrefix(val)
		    return url
		},
		
		// 失去焦点 - 隐藏键盘
		handleBlur() {
			console.log('失去焦点')
			this.emojiVisible = false
			this.keyboardStatus = false;
			this.keyboardHeight = 0;
		},
		// 发送评论消息
		handleSendMsg() {
			const app = this
			if (app.messages.trim()) {
				FindApi.corseCommentCreate({
					id: app.id,
					"content": app.messages
				}).then(result => {
					console.log(result, '发送消息')
					app.messages = ''
					app.getCommentList() // 评论列表
					app.$toast(result.message)
				}).catch(() => {
					
				})
			} else {
				app.$toast('请输入内容')
			}
			// store.dispatch('sendSocketMessage', obj)
		},
		showEmoji() {
			this.emojiVisible = !this.emojiVisible  
		},
		// 选择表情
		handleChang(item) {
		  this.messages = this.messages + item.emoji
		  this.emojiVisible = !this.emojiVisible  
		},
		// 滚动到底部
		scrollToBottom() {
			
		},
		
		formattedDate(val) {
		  const date = new Date(val * 1000);
		  const year = date.getFullYear();
		  const month = String(date.getMonth() + 1).padStart(2, '0');
		  const day = String(date.getDate()).padStart(2, '0');
		  const hours = String(date.getHours()).padStart(2, '0');
		  const minutes = String(date.getMinutes()).padStart(2, '0');
		  const seconds = String(date.getSeconds()).padStart(2, '0');
		  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		// 删除
		handleDelete(val) {
			const app = this
			FindApi.corseCommentDeleted({
				id: val.id
			}).then(result => {
				console.log(result, '删除')
				app.getCommentList() // 评论列表
				app.$toast(result.message)
			}).catch(() => {
				
			})
		},
		
		// 键盘相关事件
		onKeyborardHeightChange(event) {
			console.log('键盘相关事件',event, this.keyboardStatus)
			this.keyboardHeight = event.detail.height;
		},
		
		goCourse(val) {
			this.$navTo('pages/course/course', { id: val.id, name: val.title })
		}
	  },
	  /**
	   * 下拉刷新
	   */
	  onPullDownRefresh() {
	  	console.log('下拉刷新')
	    // 获取首页数据
	    this.getCourseList()
	    this.getCoursePalyer()
	    uni.stopPullDownRefresh()
	  },
	}
</script>

<style scoped lang="scss">
.container {
  // 设置ios刘海屏底部横线安全区域
  padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
}
 .live-video{
   width: 100%;
   height: 28vh;
   object-fit: cover; /* 确保视频撑满父容器 */
   border-radius: 10rpx;
 }
  .play-btn-icon{
	  position: absolute;
	  top: 10%;
	  left: 43%;
	  width: 120rpx;
	  height: 120rpx;
  }
 // 卡片区域
 .card-area {
   margin-top: 0rpx;
   padding: 0 30rpx;
   background-color: #fff;
   .u-node {
   		width: 44rpx;
   		height: 44rpx;
   		border-radius: 100rpx;
   		display: flex;
   		justify-content: center;
   		align-items: center;
   		background: #d0d0d0;
   	}
   	
   	.u-order-title {
   		color: #333333;
   		font-weight: bold;
   		font-size: 32rpx;
   	}
   	
   	.u-order-desc {
   		color: rgb(150, 150, 150);
   		font-size: 28rpx;
   		margin-bottom: 6rpx;
   	}
   	
   	.u-order-time {
   		color: rgb(200, 200, 200);
   		font-size: 26rpx;
   	}
	.chapter-line-content{
		display: flex;
		justify-content: space-between;
	}
	.chapter-video{
		width: 24vh;
		height: 15vh;
		object-fit: cover; /* 确保视频撑满父容器 */
		border-radius: 10rpx;
	}
	.list-ss{
		position: relative;
		.items-image{
			width: 24vh;
			height: 15vh;
			object-fit: cover; /* 确保视频撑满父容器 */
			border-radius: 10rpx;
		}
		.items-icon-play{
		  position: absolute;
		  top: 0;
		  left:0;
		  width: 100%;
		  height: 70%;
		  line-height: 226rpx;
		  text-align: center;
		  border-radius: 20rpx;
		  // background-color: rgba(255,255,255,0.2);
		  .items-icon-image{
			  width: 80rpx;
			  height: 80rpx;
			  text-align: center;
			  opacity: 0.4;
		  }
		}
	}
 }
 // 通栏卡片
 .i-card {
   background: #fff;
   padding: 24rpx 24rpx;
   width: 100%;
   // box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
   margin: 0 auto 30rpx auto;
   border-radius: 20rpx;
 }
 .course-title{
	 font-size: 32rpx;
	 font-weight: bold;
	 line-height: 60rpx;
	 margin: 20rpx 0;
 }
 .course-content{
	 font-size: 28rpx;
	 line-height: 40rpx;
	 color: #999;
	 margin: 20rpx 0 60rpx 0;
 }
 
 // 其他信息
 .order-info {
 
   .info-item {
     display: flex;
     margin-bottom: 24rpx;
 
     &:last-child {
       margin-bottom: 0;
     }
 
     .item-lable {
       display: flex;
       align-items: center;
       font-size: 24rpx;
       color: #999;
       margin-right: 30rpx;
     }
 
     .item-content {
       flex: 1;
       display: flex;
       align-items: center;
       font-size: 26rpx;
       color: #333;
     }
   }
 }
 .details-image{
	 width: 100%;
	 height: 28vh;
	 background-color: #eef0f5;
 }
 .tab-title{
	 font-size: 32rpx;
	 line-height: 60rpx;
	 margin: 20rpx 0;
	 padding: 0 20rpx;
	 font-weight: bold;
	 border-bottom: 1rpx solid #ddd;
 }
 .con-ss{
	 padding: 0 20rpx;
 }
 .comment-box{
	 background-color: #fff;
	  .course-message{
		// padding: 20rpx 6rpx;
		max-height: 39vh;
		overflow-y: auto;
	 }
	 .item {
	 	padding: 40rpx 30rpx 40rpx 30rpx;
	 	margin: 0 0 10rpx 0;
	 	border-bottom: 1rpx solid #F5F4F5;
	 
	 	.avatar {
	 		width: 90rpx;
	 		height: 90rpx;
	 		border-radius: 50%;
	 		background-color: #eef0f5;
	 	}
	 
	 	.content {
	 		flex: 2;
	 		margin-left: 20rpx;
	 		position: relative;
	 
	 		.name {
	 			font-size: 28rpx;
	 			font-weight: 700;
	 			color: #596D95;
	 			margin-bottom: 10rpx;
	 		}
	 
	 		.text {
	 			font-size: 28rpx;
	 			line-height: 44rpx;
				margin:5rpx 0;
	 		}
	 
	 		.video {
	 			width: 400rpx;
	 			height: 400rpx;
	 		}
	 
	 		.images {
	 			flex-wrap: wrap;
	 			padding: 0 0 10rpx 0;
	 		}
	 
	 		.address {
	 			color: #596D95;
	 			font-size: 26rpx;
	 			margin: 10rpx 0;
	 		}
	 	}
		.line {
			position: relative;
			z-index: 999;
		}
		
		.time {
			color: #999;
			font-size: 24rpx;
		}
		
		.icon {
			font-size: 24rpx;
		}
	 }
	 .foot-position{
	 	position: fixed;
	 	bottom: 0rpx;
	 	left: 0rpx;
		width:100%;
		z-index: 999;
		transition-property: bottom;
		transition-duration: 100ms;
		background-color: #fff;
	 	.foot-content{
	 		display: flex;
	 		align-items: center;
	 		padding: 16rpx 16rpx 50rpx 16rpx;
			border-top: 1rpx solid #eee;
			.left-c{
				display: flex;
				align-items: center;
				flex:1;
				padding: 14rpx 20rpx;
				margin-right: 20rpx;
				border-radius: 60rpx;
				background-color: #f0f0f0;
			}
	 		.image-item{
	 			width:46rpx;
	 			height:46rpx;
	 			margin-right:16rpx;
	 		}
	 		.foot-input{
	 			flex: 1;
	 		}
	 		.button {
	 		  width: 120rpx;
	 		  height: 68rpx;
	 		  background: linear-gradient(to right, #12a15c, #12a15c);
	 		  color: #fff;
	 		  font-size: 26rpx;
	 		  border-radius: 50rpx;
	 		  letter-spacing: 5rpx;
	 		  display: flex;
	 		  justify-content: center;
	 		  align-items: center;
	 		
	 		  // 禁用按钮
	 		  &.disabled {
	 		    opacity: 0.6;
	 		  }
	 		}
	 	}
	 	.emoji-box{
	 		padding: 16rpx;
	 		max-height: 250rpx;
	 		overflow: auto;
	 		.emoji-title{
	 			line-height: 40rpx;
	 			font-weight: bold;
	 		}
	 		.emoji-item{
	 		    margin-right: 16rpx;
	 		    margin-bottom: 10rpx;
	 		}
	 	}
	 }
 }
</style>